/// Styles the screenshot preview container in the form.

.mxfeedback-screenshot-preview {
    position: relative;
    margin: 20px auto;
    height: $mxfeedback-screenshot-preview-height;
    cursor: pointer;

    &__image {
        display: block;
        object-fit: contain;
        height: 100%;
        aspect-ratio: 16 / 9;
        border: 1px solid $gray;
        border-radius: $border-radius-default;
    }

    &__overlay {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        opacity: 0;
        transition: 0.3s ease;
        background-color: $gray-darker;
        border: 1px solid $gray-dark;
        border-radius: $border-radius-default;

        &:hover {
            opacity: 0.5;
        }

        &:focus-visible {
            opacity: 0.5;
        }
    }

    &__preview-icon {
        width: $mxfeedback-icon-size-md;
        height: $mxfeedback-icon-size-md;
        fill: $gray-lighter;
    }

    &__delete-icon {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(50%, -50%);
        width: $mxfeedback-icon-size-md;
        height: $mxfeedback-icon-size-md;
        stroke: $gray-dark;
        fill: $gray-lighter;
        z-index: 1;
        cursor: pointer;
    }
}
